import React from 'react';
import { Form, Row, Col, Input, Button, DatePicker } from 'antd';
import OrganizationSelect from '@/components/OrganizationSelect';
import SchoolTypeSelect from '@/components/SchoolTypeSelect';
import { STATIC } from '@/services/config';
import MoerSearch from '@/components/MoerSearch';
import moment from 'moment';

class Search extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      isShow: false
    }
    this.formRef = React.createRef()
  }

  /* 重置数据 */
  onReset = () => {
    const { reset } = this.props;
    this.formRef.current.resetFields();
    reset ? reset() : null
  }

  /* 表单提交 */
  onFinish = (e) => {
    const { search } = this.props;
    const query = {...e};
    if (query.createDate) {
      query.startDate = moment(query.createDate[0]).format('YYYY-MM-DD 00:00:00');
      query.endDate = moment(query.createDate[1]).format('YYYY-MM-DD 59:59:59');
      delete query.createDate;
    }
    search ? search(query) : null;
  }

  /* 监听按钮变化 */
  onMoreChange = (show) => {
    this.setState({isShow: show})
  }

  render() {
    const isShow = this.state.isShow;
    const reasonTypeList = STATIC.reasonType;
    const {formRef, onReset} = this;
    return (
      <Form
        ref={formRef}
        name="advanced_search"
        className="ant-advanced-search-form"
        onFinish={this.onFinish}>
        <Row gutter={24}>
          <Col span={6}>
            <Form.Item
              name='unitId'
              label='所属机构：'>
              <OrganizationSelect />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name='schoolType'
              label='学校类型：'>
              <SchoolTypeSelect />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              label='创建日期'
              name='createDate'>
              <DatePicker.RangePicker />
            </Form.Item>
          </Col>
          <Col span={6} style={{display: isShow ? '' : 'none'}}>
            <Form.Item
              name='name'
              label='机构名称：'>
              <Input placeholder='请输入机构名称' />
            </Form.Item>
          </Col>
          <Col span={isShow ? 24 : 6} style={{ textAlign: 'right' }}>
            <Form.Item>
              <MoerSearch change={this.onMoreChange}>
                <Button type="primary" htmlType="submit">查询</Button>
                <Button onClick={onReset}>重置</Button>
              </MoerSearch>
            </Form.Item>
          </Col>
        </Row>

      </Form>
    )
  }
}

export default Search